<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>我的账户 || Rongcha - 抹茶</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" href="<%=basePath%>images/img/favicon.ico">
    <!-- All CSS Hear -->
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/simple-line-icons.css">
    <link rel="stylesheet" href="<%=basePath%>css/icofont.css">
    <link rel="stylesheet" href="<%=basePath%>css/magnific-popup.css">
    <link rel="stylesheet" href="<%=basePath%>css/animate.css">
    <link rel="stylesheet" href="<%=basePath%>css/nice-select.css">
    <link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css">
    <link rel="stylesheet" href="<%=basePath%>css/owl.carousel.min.css">
    <link rel="stylesheet" href="<%=basePath%>css/mainmenu.css">
    <!-- Style CSS Hear -->
    <link rel="stylesheet" href="<%=basePath%>css/style.css">
    <link rel="stylesheet" href="<%=basePath%>css/responsive.css">
    <script src="<%=basePath%>js/vendor/modernizr-2.8.3.min.js"></script>
    
    <style>
        .account-area {
            background: #f8f9fa;
        }
        .account-card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 30px;
            margin-bottom: 30px;
        }
        .account-form .form-group {
            margin-bottom: 20px;
        }
        .account-form label {
            font-weight: 600;
            color: #333;
            margin-bottom: 8px;
        }
        .account-form .form-control {
            border: 2px solid #e0e0e0;
            border-radius: 5px;
            padding: 12px 15px;
            font-size: 14px;
            transition: border-color 0.3s;
        }
        .account-form .form-control:focus {
            border-color: #8B9E6B;
            box-shadow: 0 0 0 0.2rem rgba(139, 158, 107, 0.25);
        }
        .btn-update {
            background: linear-gradient(135deg, #8B9E6B, #7A8D5D);
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 5px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .btn-update:hover {
            background: linear-gradient(135deg, #7A8D5D, #6B7A4F);
            color: white;
            transform: translateY(-2px);
        }
        .account-stats {
            background: linear-gradient(135deg, #8B9E6B, #7A8D5D);
            color: white;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
        }
        .stat-item {
            margin-bottom: 15px;
        }
        .stat-number {
            font-size: 24px;
            font-weight: bold;
            display: block;
        }
        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }
        .alert {
            border-radius: 5px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <!-- Header Start -->
    <header>
        <div class="header-area bg-gray">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-4">
                        <div class="logo">
                            <a href="<%=basePath%>views/user/index.jsp"><img src="<%=basePath%>images/img/logo/logo.png" alt=""></a>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8">
                        <div class="header-main-content">
                            <div class="main-menu-area d-none d-lg-block">
                                <nav>
                                    <ul>
                                        <li><a href="<%=basePath%>views/user/index.jsp">首页</a></li>
                                        <li><a href="<%=basePath%>views/user/about-us.jsp">关于我们</a></li>
                                        <li><a href="<%=basePath%>user/shop">商城 <i class="icofont icofont-simple-down"></i></a>
                                            <ul class="sub-menu">
                                                <li><a href="<%=basePath%>user/cart">购物车</a></li>
                                                <li><a href="<%=basePath%>user/orders">订单</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="#"> 我的 <i class="icofont icofont-simple-down"></i></a>
                                            <ul class="sub-menu">
                                                <li><a href="<%=basePath%>user/account" class="active">我的账户</a></li>
                                                <li><a href="<%=basePath%>views/login.jsp">登录注册</a></li>
                                            </ul>
                                        </li>
                                        <li><a href="<%=basePath%>views/user/blog.jsp">博客</a></li>
                                        <li><a href="<%=basePath%>views/user/contact-us.jsp"> 联系我们</a></li>
                                    </ul>
                                </nav>
                            </div>
                            <div class="right-blok-box">
                                <div class="serch-container hidden-xs">
                                    <a href="#"><i class="icon-magnifier"></i></a>
                                    <div class="blog-search">
                                        <form action="#" id="search">
                                            <input
                                                    type="text"
                                                    placeholder="点击此处进行搜索"
                                                    name="s"
                                            />
                                            <button type="submit">
                                                <i class="icofont icofont-search-alt-1"></i>
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                <div class="mine-cart-box">
                                    <a href="<%=basePath%>user/cart"
                                    ><i class="icon-handbag"></i
                                    ><span id="cart-total">2</span></a
                                    >
                                    <ul class="mini-cart">
                                        <li class="cart-item">
                                            <div class="cart-image">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><img
                                                        src="<%=basePath%>images/img/product/1.jpg"
                                                        alt=""
                                                /></a>
                                            </div>
                                            <div class="cart-title">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><h4>热茶</h4></a
                                                >
                                                <span class="quantity">1 ×</span>
                                                <div class="price-box">
                                                    <span class="new-price">$ 130.00</span>
                                                </div>
                                                <a href="#" class="remove_from_cart"
                                                ><i class="icon-trash icons"></i
                                                ></a>
                                            </div>
                                        </li>
                                        <li class="cart-item">
                                            <div class="cart-image">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><img
                                                        src="<%=basePath%>images/img/product/6.jpg"
                                                        alt=""
                                                /></a>
                                            </div>
                                            <div class="cart-title">
                                                <a href="<%=basePath%>views/user/single-product.jsp"
                                                ><h4>水果绿茶</h4></a
                                                >
                                                <span class="quantity">1 ×</span>
                                                <div class="price-box">
                                                    <span class="new-price">$ 100.99</span>
                                                </div>
                                                <a href="#" class="remove_from_cart"
                                                ><i class="icon-trash icons"></i
                                                ></a>
                                            </div>
                                        </li>
                                        <li class="subtotal-titles">
                                            <div class="subtotal-titles">
                                                <h3>总价 :</h3>
                                                <span>$ 230.99</span>
                                            </div>
                                        </li>
                                        <li class="mini-cart-btns">
                                            <div class="cart-btns">
                                                <a href="<%=basePath%>user/cart"
                                                >购物车</a
                                                >
                                                <a href="<%=basePath%>user/orders">订单</a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="top-login-menu">
                                    <div class="top-login-inner">
                                        <c:choose>
                                            <c:when test="${not empty sessionScope.customerName}">
                                                <a href="<%=basePath%>user/account"><i class="icon-user"></i> <span class="user-login">${sessionScope.customerName}</span> </a>
                                            </c:when>
                                            <c:otherwise>
                                                <a href="<%=basePath%>views/login.jsp"><i class="icon-user"></i> <span class="user-login">Login</span> </a>
                                            </c:otherwise>
                                        </c:choose>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!-- Header End -->

    <!-- Breadcrumb Area Start -->
<%--    <div class="breadcrumb-area ptb-100 bg-gray">--%>
<%--        <div class="container">--%>
<%--            <div class="row">--%>
<%--                <div class="col">--%>
<%--                    <div class="breadcrumb-content text-center">--%>
<%--                        <h2>我的账户</h2>--%>
<%--                        <ul>--%>
<%--                            <li><a href="<%=basePath%>views/user/index.jsp">首页</a></li>--%>
<%--                            <li class="active">我的账户</li>--%>
<%--                        </ul>--%>
<%--                    </div>--%>
<%--                </div>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>
    <!-- Breadcrumb Area End -->

    <!-- Account Area Start -->
    <div class="account-area ptb-100">
        <div class="container">
            <div class="row">
                <!-- Account Info -->
                <div class="col-lg-8">
                    <div class="account-card">
                        <h4 class="mb-4">个人信息</h4>
                        
                        <!-- 显示消息 -->
                        <c:if test="${not empty message}">
                            <div class="alert alert-success">${message}</div>
                        </c:if>
                        <c:if test="${not empty error}">
                            <div class="alert alert-danger">${error}</div>
                        </c:if>
                        
                        <form action="<%=basePath%>user/updateAccount" method="post" class="account-form">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="customerName">姓名 *</label>
                                        <input type="text" class="form-control" id="customerName" name="customerName" 
                                               value="${customer.customer_name}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="phone">手机号 *</label>
                                        <input type="tel" class="form-control" id="phone" name="phone" 
                                               value="${customer.phone}" required>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="email">邮箱 *</label>
                                        <input type="email" class="form-control" id="email" name="email" 
                                               value="${customer.email}" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="gender">性别</label>
                                        <select class="form-control" id="gender" name="gender">
                                            <option value="1" ${customer.gender == 1 ? 'selected' : ''}>男</option>
                                            <option value="0" ${customer.gender == 0 ? 'selected' : ''}>女</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <button type="submit" class="btn btn-update">
                                    <i class="icon-check"></i> 更新信息
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Account Stats -->
                <div class="col-lg-4">
                    <div class="account-card">
                        <div class="account-stats">
                            <h5 class="mb-4">账户统计</h5>
                            <div class="stat-item">
                                <span class="stat-number" id="totalOrders">0</span>
                                <span class="stat-label">总订单数</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="totalSpent">¥0.00</span>
                                <span class="stat-label">总消费金额</span>
                            </div>
                            <div class="stat-item">
                                <span class="stat-number" id="cartItems">0</span>
                                <span class="stat-label">购物车商品</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="account-card">
                        <h5 class="mb-3">快捷操作</h5>
                        <div class="d-grid gap-2">
                            <a href="<%=basePath%>user/orders" class="btn btn-outline-primary">
                                <i class="icon-list"></i> 查看订单
                            </a>
                            <a href="<%=basePath%>user/cart" class="btn btn-outline-primary">
                                <i class="icon-handbag"></i> 购物车
                            </a>
                            <a href="<%=basePath%>user/shop" class="btn btn-outline-primary">
                                <i class="icon-basket"></i> 继续购物
                            </a>
                            <a href="<%=basePath%>LogoutServlet" class="btn btn-outline-danger" onclick="return confirm('确定要退出登录吗？')">
                                <i class="icon-logout"></i> 退出登录
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Account Area End -->

    <!-- Footer Start -->
    <footer class="footer-area bg-gray ptb-100">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="footer-content text-center">
                        <p>&copy; 2023 Rongcha. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- Footer End -->
</div>

<!-- All JS Hear -->
<script src="<%=basePath%>js/vendor/jquery-1.12.0.min.js"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/jquery-ui.js"></script>
<script src="<%=basePath%>js/jquery.nice-select.min.js"></script>
<script src="<%=basePath%>js/jquery.magnific-popup.min.js"></script>
<script src="<%=basePath%>js/owl.carousel.min.js"></script>
<script src="<%=basePath%>js/jquery.slicknav.min.js"></script>
<script src="<%=basePath%>js/plugins.js"></script>
<script src="<%=basePath%>js/main.js"></script>

<script>
// 页面加载完成后获取统计数据
$(document).ready(function() {
    loadAccountStats();
});

// 加载账户统计数据
function loadAccountStats() {
    $.ajax({
        url: '<%=basePath%>user/stats',
        type: 'GET',
        success: function(response) {
            if (response.success) {
                $('#totalOrders').text(response.totalOrders || 0);
                $('#totalSpent').text('¥' + (response.totalSpent || 0).toFixed(2));
                $('#cartItems').text(response.cartItems || 0);
            }
        },
        error: function() {
            console.log('获取统计数据失败');
        }
    });
}

// 表单验证
$('.account-form').on('submit', function(e) {
    var customerName = $('#customerName').val().trim();
    var phone = $('#phone').val().trim();
    var email = $('#email').val().trim();
    
    if (!customerName) {
        alert('请输入姓名');
        e.preventDefault();
        return false;
    }
    
    if (!phone) {
        alert('请输入手机号');
        e.preventDefault();
        return false;
    }
    
    // 简单的手机号验证
    var phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneRegex.test(phone)) {
        alert('请输入正确的手机号');
        e.preventDefault();
        return false;
    }
    
    if (!email) {
        alert('请输入邮箱');
        e.preventDefault();
        return false;
    }
    
    // 简单的邮箱验证
    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('请输入正确的邮箱格式');
        e.preventDefault();
        return false;
    }
    
    return true;
});
</script>

</body>
</html>
